<template>
  <!--存放位置-->
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-button-group style="margin-bottom: 20px">
        <el-button @click="Xin">新增</el-button>
        <el-button @click="bian">编辑</el-button>
        <el-button @click="Delete2">删除</el-button>
        <el-button @click="Dong">启用</el-button>
        <el-button @click="Ting">停用</el-button>
        <el-input placeholder="请输入设备编号或名称" clearable prefix-icon="el-icon-search" suffix-icon="el-icon-s-cale"
          style="width: 250px; margin-left: 573px" v-model="name" @input="handlerPageNo" />
      </el-button-group>
      <el-table :data="storageLocations" style="width: 100%" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="depositName" label="存放位置名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="depositEncode" label="存放位置编码" align="center">
        </el-table-column>
        <el-table-column prop="depositSort" label="排序" width="100" align="center">
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-if="scope.row.depositState == 1">启动</el-tag>
            <el-tag type="warning" effect="dark" v-if="scope.row.depositState == 2">禁用</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.currentStatus == 3">报废</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="depositRemark" label="备注" align="center">
        </el-table-column>
      </el-table>
      <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" :total="total"
        layout="prev, pager, next, sizes, total" :page-sizes="[10, 20, 30, 50]" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <!--新增抽屉面板-->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="35%">
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span> 新增 </span>
        </div>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="left"
          style="padding: 20px">
          <el-form-item label="存放位置名称" prop="depositName">
            <el-input v-model="form.depositName"></el-input>
          </el-form-item>
          <el-form-item label="存放位置编码" prop="depositEncode">
            <el-input v-model="form.depositEncode"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="depositSort" style="margin-left: 20px">
            <el-input v-model="form.depositSort"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="depositState" style="margin-left: 20px">
            <el-radio-group ref="radio" v-model="form.depositState">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="depositRemark" style="margin-left: 20px">
            <el-input type="textarea" v-model="form.depositRemark" cols="10px" rows="3px"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 171px; margin-top: 92px">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="handleSubmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import {
  selectLocation,
  InsertLocation,
  UpdateLocation,
  selectLocation2
} from "@/api/eastjet-maintenance/type/type";
export default {
  data() {
    return {
      name: "",
      form: {
        depositName: "",
        depositEncode: "",
        depositSort: "",
        depositState: "",
        depositRemark: "",
      },
      // 添加表单验证规则
      rules: {
        depositName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        depositEncode: [
          { required: true, message: '请输入仓库编码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '编码只能包含字母和数字', trigger: 'blur' }
        ],
        depositSort: [
          { required: true, message: '请输入排序号', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '排序号只能为数字', trigger: 'blur' }
        ],
        depositState: [
          { required: true, message: '请选择仓库状态', trigger: 'change' }
        ],
        depositRemark: [
          { max: 200, message: '备注最多200个字符', trigger: 'blur' }
        ]
      },
      drawer: false,
      storageLocations: [],
      deletelist: [],
      currentPage: 1,
      pageSize: 10,
      total: 45,
      xiu: 1,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      selectLocation2(this.name, this.currentPage, this.pageSize).then((res) => {
        this.storageLocations = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      selectLocation2(this.name, this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      });
      console.log(`当前页: ${page}`);
    },
    Xin() {
      this.form.depositName = ""
      this.form.depositEncode = ""
      this.form.depositSort = ""
      this.form.depositState = ""
      this.form.depositRemark = ""
      this.drawer = true
    },
    bian() {
      if (this.deletelist.length != 0) {
        this.xiu = 2
        this.form.depositName = this.deletelist[0].depositName;
        this.form.depositEncode = this.deletelist[0].depositEncode;
        this.form.depositSort = this.deletelist[0].depositSort;
        this.form.depositState = this.deletelist[0].depositState;
        this.form.depositRemark = this.deletelist[0].depositRemark;
        this.drawer = true
      } else {
        this.$message({
          message: '请选择数据',
          type: 'warning'
        });
      }
    },
    Delete2() {
      this.deletelist.forEach((item) => {
        item.tombstone = 1;
      });
      const location = JSON.stringify(this.deletelist);
      UpdateLocation(location).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.$notify({
            title: "启动成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        } else {
          this.$notify({
            title: "启动失败",
            message: "这是一条失败的提示消息",
            type: "success",
          });
        }
      });
    },
    Dong() {
      this.deletelist.forEach((item) => {
        item.depositState = 1;
      });
      const location = JSON.stringify(this.deletelist);
      UpdateLocation(location).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.$notify({
            title: "启动成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        } else {
          this.$notify({
            title: "启动失败",
            message: "这是一条失败的提示消息",
            type: "success",
          });
        }
      });
    },
    Ting() {
      this.deletelist.forEach((item) => {
        item.depositState = 2;
      });
      const location = JSON.stringify(this.deletelist);
      UpdateLocation(location).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.$notify({
            title: "启动成功",
            message: "这是一条成功的提示消息",
            type: "success",
          });
        } else {
          this.$notify({
            title: "启动失败",
            message: "这是一条失败的提示消息",
            type: "success",
          });
        }
      });
    },
    handleSelectionChange(selection) {
      this.deletelist = selection;
    },
    handleCancel() {
      this.drawer = false;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，进行二次确认
          if (!this.form.depositName) {
            this.$message.error('请输入仓库名称');
            return;
          }
          if (!this.form.depositEncode) {
            this.$message.error('请输入仓库编码');
            return;
          }
          if (!this.form.depositSort) {
            this.$message.error('请输入排序号');
            return;
          }
          if (!this.form.depositState) {
            this.$message.error('请选择仓库状态');
            return;
          }
          InsertLocation(this.form).then((res) => {
            if (parseInt(res.data.code) == 520) {
              this.getList();
              this.drawer = false;
              this.$notify({
                title: "成功",
                message: "这是一条成功的提示消息",
                type: "success",
              });
            } else {
            }
          });
        } else {
          this.$message.error('请填写必填项');
          return false;
        }
      });
    },
    getList() {
      selectLocation("").then((res) => {
        console.log("数据", res);
        this.storageLocations = res.data.data.list;
        this.total = res.data.data.total;
      });
    },

    handlerPageNo() {
      selectLocation(this.name).then((res) => {
        this.storageLocations = res.data.data;
      });
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1210px;
  height: 660px;
  margin-left: 14px;
}

.box-card2 {
  width: 526px;
  height: 749px;
  margin-left: 2px;
}
</style>
